var path = require("path")
var HtmlWebpackPlugin = require("html-webpack-plugin")
var webpack = require("webpack")
module.exports = {
    mode:"development",
    entry:'./src/index.js',   //指定被打包的文件
    output:{
        path:path.resolve(__dirname,'dist'),  //指定打包结果的存放路径
        filename:'index.js'  //指定打包后的文件名
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'./public/index.html'  //指定生成html时需要参照的模板文件
        }),
        new webpack.ProvidePlugin({ // 解决React is not defined问题
            "React": "react",
        }),
    ],
    devServer:{
        port:3001,
        open:true   //自动打开浏览器
    },
    module: {
        rules: [ //配置各种loader的规则
            {
                test: /\.(js|jsx)$/,  //指定需要这个loader协助编译的文件类型
                exclude: /node_modules/,  //排除一些不需要解析的目录
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['@babel/preset-react'] //指定编译时所用的预设包
                    }
                }
            },
            {   
                test: /\.css$/,  //解析css样式的loader配置
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    },
    resolve:{
        extensions:['.js','.jsx']
    }
}